<template>
	<view class="custom-tabbar">
		<u-tabbar :value="current" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" @change="onChange"
			:height="100" :border="true" :activeColor="activeColor" :inactiveColor="inactiveColor">
			<u-tabbar-item v-for="(item, index) in tabbarList" :key="index" :text="item.text"
				@click="onClick(index, item.pagePath)">
				<image slot="active-icon" class="u-tabbar-item__icon" :src="item.selectedIconPath" mode="widthFix">
				</image>
				<image slot="inactive-icon" class="u-tabbar-item__icon" :src="item.iconPath" mode="widthFix"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
export default {
	name: 'CustomTabBar',
	data() {
		return {
			current: 0,
			activeColor: '#5C4033',
			inactiveColor: '#A1887F',
			tabbarList: [
				{
					pagePath: 'pages/shop/index',
					text: '商城',
					iconPath: '/static/tabbar/商城.png',
					selectedIconPath: '/static/tabbar/商城.png'
				},
				{
					pagePath: 'pages/category/index',
					text: '分类',
					iconPath: '/static/tabbar/分类.png',
					selectedIconPath: '/static/tabbar/分类.png'
				},
				{
					pagePath: 'pages/selection/index',
					text: '狗道甄选',
					iconPath: '/static/tabbar/狗道甄选.png',
					selectedIconPath: '/static/tabbar/狗道甄选.png'
				},
				{
					pagePath: 'pages/cart/index',
					text: '购物车',
					iconPath: '/static/tabbar/购物车.png',
					selectedIconPath: '/static/tabbar/购物车.png'
				},
				{
					pagePath: 'pages/my/index',
					text: '我的',
					iconPath: '/static/tabbar/我的.png',
					selectedIconPath: '/static/tabbar/我的.png'
				}
			]
		};
	},
	created() {
		// 根据当前页面路径设置选中的tabbar项
		this.setCurrentTab();

		// 监听页面显示事件，更新当前选中的标签
		uni.$on('updateTabBar', (index) => {
			this.current = index;
		});
	},
	beforeDestroy() {
		// 组件销毁前移除事件监听
		uni.$off('updateTabBar');
	},
	methods: {
		onClick(index, pagePath) {
			// 如果点击的是当前页面，不做跳转
			if (index === this.current) return;

			// 先更新当前选中的标签
			this.current = index;

			// 跳转到对应页面
			uni.reLaunch({
				url: `/${pagePath}`,
				success: () => {
					// 成功跳转后，发送事件更新TabBar
					uni.$emit('updateTabBar', index);
				}
			});
		},
		onChange(index) {
			// 如果点击的是当前页面，不做跳转
			if (index === this.current) return;

			// 先更新当前选中的标签
			this.current = index;

			// 跳转到对应页面
			const pagePath = this.tabbarList[index].pagePath;
			uni.reLaunch({
				url: `/${pagePath}`,
				success: () => {
					// 成功跳转后，发送事件更新TabBar
					uni.$emit('updateTabBar', index);
				}
			});
		},
		setCurrentTab() {
			const pages = getCurrentPages();
			if (pages.length === 0) return;

			const currentPage = pages[pages.length - 1];
			const currentPath = currentPage.route;

			// 查找当前页面对应的tabbar索引
			const index = this.tabbarList.findIndex(item => {
				return item.pagePath === currentPath || `/${item.pagePath}` === currentPath;
			});

			if (index !== -1) {
				this.current = index;
				// 存储当前选中的标签到本地存储
				uni.setStorageSync('tabBarIndex', index);
			} else {
				// 如果没有找到匹配的页面，尝试从本地存储获取
				const savedIndex = uni.getStorageSync('tabBarIndex');
				if (savedIndex !== '' && savedIndex !== undefined) {
					this.current = savedIndex;
				}
			}
		}
	}
};
</script>

<style lang="scss">
.custom-tabbar {
	/* 自定义样式可以在这里添加 */
}
</style>